export function useAppRouter() {
  const route = useRoute()
  const router = useRouter()

  function pushStack(path: string, query: Record<string, any> = {}) {
    console.log("route", route)
    const startsWithSlash = path.startsWith('/')
    const currentPathEndsWithSlash = route.path.endsWith('/')
    // 路径拼接: 根据传入的 path，判断是否以斜杠开头，以及当前路径是否以斜杠结尾，以确保路径拼接正确。
    // 路由跳转: 使用 router.push 方法进行路由跳转，同时合并当前的查询参数和新传入的查询参数。
    router.push({
      path: `${currentPathEndsWithSlash ? route.path.slice(0, -1) : route.path}${startsWithSlash ? path : `/${path}`}`,
      query: {
        ...route.query,
        ...query
      }
    })
  }

  return {
    route,
    router,
    pushStack
  }
}

// 主视图(routerStack.vue): 负责管理整体页面结构和父子视图之间的切换。
// 子视图(routerStackView.vue): 负责具体的子页面内容渲染，并应用路由切换时的动画效果。
/**
 * <router-stack-view /> 是一个用于管理路由堆栈视图的组件，通常用于处理具有层级关系的路由导航。当你在应用中需要在多个页面之间切换时，特别是需要支持“前进”和“返回”的导航行为时，使用这个组件会非常方便
 
管理路由堆栈: 它可以记录并管理页面的导航堆栈，使得用户在导航到一个新页面时，前一个页面不会被销毁，从而能够在返回时保留页面状态。
过渡动画: 它通常与过渡动画结合使用，能够在页面切换时提供平滑的过渡效果。
子路由嵌套: 当一个页面中可能存在多个子页面（例如详情页和设置页）时，<router-stack-view /> 可以帮助管理这些子页面的展示顺序和层级关系。
前进后退操作: 该组件会在路由变化时维护一个栈结构，支持前进后退操作，类似于浏览器的前进后退功能，确保用户在使用移动设备或单页面应用时体验更加自然。
 */
